<template>
  <view class="app-container ver-layout-center">
    <!--    <view class="title">欢迎登录万锦合泰小区管理系统</view>-->
    <view class="title">欢迎登录管理系统</view>
    <view class="login-box ver-layout">
      <view class="hor-layout-center">
        <view class="login-key">手机号</view>
        <u-input v-model="loginPara.phone" trim type="number" maxlength="11"
                 placeholder="请输入手机号"/>
      </view>
      <view class="login-divider"></view>
      <view class="hor-layout-center">
        <view class="login-key">验证码</view>
        <u-input v-model="loginPara.code" trim type="number" maxlength="6" placeholder="请输入验证码"/>
        <u-verification-code :seconds="30" @end="end" @start="start" ref="uCode"
                             @change="codeChange"></u-verification-code>
        <u-button :disabled="!canYzmSend" :style="getYzmStyle" size="medium" ripple @tap="getYzmCode">
          {{ yzmObj.tips }}
        </u-button>
      </view>
    </view>
    <u-button :style="loginBtnStyle" :disabled="!canLoginUse" type="primary" shape="circle" ripple @click="userLogin">
      登录
    </u-button>
  </view>
</template>

<script>
const getYzmStyle = {
      height: '32px',
      padding: '0 10px',
      marginLeft: '10px'
    },
    loginBtnStyle = {
      marginTop: '30px',
      width: '78%'
    }
export default {
  data() {
    return {
      loginPara: {
        phone: '',
        code: ''
      },
      yzmObj: {
        tips: ''
      },
      getYzmStyle,
      loginBtnStyle
    }
  },
  computed: {
    canYzmSend() {
      return this.loginPara.phone ? true : false
    },
    canLoginUse() {
      return this.loginPara.phone && this.loginPara.code
    }
  },
  onLoad() {

  },
  methods: {
    end() {
      this.$u.toast('倒计时结束');
    },
    start() {
      this.$u.toast('倒计时开始');
    },
    codeChange(text) {
      this.yzmObj.tips = text;
    },
    showToast() {
      this.$u.toast('验证失败，请重新登录');
    },
    toTest() {
      this.$u.route('/pages/index/test')
    },
    getYzmCode() {
      if (this.$refs.uCode.canGetCode) {
        this.$u.toast("发送验证码")
        this.$refs.uCode.start();
      } else {
        this.$u.toast("等倒计时结束后再发送！")
      }
    },
    userLogin() {
      // this.$u.route({url: 'pages/home/home', type: 'redirectTo'})
      let {phone} = this.loginPara
      this.$db.collection('plot-house').where({phone}).get().then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>
page {
  background: #a4b0be;
  color: white;
}

.title {
  font-size: 23px;
  font-weight: 500;
  margin: 0px 10px;
  margin-top: 10vh;
}

.login-box {
  width: 80%;
  padding: 10px 15px;
  background: white;
  border-radius: 10px;
  margin-top: 10vh;
}

.login-key {
  color: grey;
  margin-right: 10px;
}

.login-divider {
  width: 100%;
  margin: 6px 0px;
  border-bottom: 1px solid #b9b9b9;
}
</style>
